<template>
    <div class="warpper-box">
      <form-create 
        v-model="params.fApi" 
        :rule="params.rule" 
        :option="params.option" 
        @btn-search-click="loadTable(true)"
        @btn-reset-click="reset"/>
        <span v-show="activeKey == '1'">
           <a-button type="danger" v-action:serviceFeeAddBtn @click="add(true)" icon="plus">新增</a-button>
        </span>
      <a-tabs :defaultActiveKey="activeKey" @change="callbackTab">
          <a-tab-pane v-for="item in serviceFeeTab" :key="item.value" :tab="item.label" :closable="false"></a-tab-pane>
      </a-tabs>
      <a-table :columns="table.columns" :pagination="table.pagination" @change="handleTableChange" rowKey="id" :data-source="table.loadData">
        <span slot="action" slot-scope="text, record">
          <span v-show="activeKey === '1'">
              <a v-action:serviceFeeAssociationAddBtn @click="$refs.createrRelation.add(record,true)">设置关联关系</a>
              <a-divider v-action:serviceFeeAssociationAddBtn type="vertical" />
              <a v-action:serviceFeeEditBtn @click="add(record)">编辑</a>
          </span>
           <span v-show="activeKey === '2'">
               <a v-action:serviceFeeAssociationEditBtn @click="$refs.createrRelation.add(record,false)">编辑</a>
          </span>
        </span>
        <span slot="fees" slot-scope="text,record">
          <div v-for="(item,index) in record.fees" :key="index">
            【{{item.amountStart}} {{item.operator}} {{item.amountEnd}}】{{item.serviceRatio}}%
          </div>
        </span>
      </a-table>

      <a-modal :title="form.title" :width="640" :visible="form.visible" @ok="handleOk" @cancel="form.visible=false">
          <form-create v-model="form.fApi" :rule="form.rule" :option="form.option" @btn-radio-change="radioChange"/>
      </a-modal>

      <service-fee-relation-form ref="createrRelation" @on-ok="onOk" />

    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import store from '@/store'
import { 
    getSysEnterpriseServiceFeeList, 
    sysEnterpriseFeeConfigAdd,
    sysEnterpriseFeeConfigEdit,
    getSysEnterpriseParkServiceFeeList,
    sysAllEnabledEnterpriseFee,
 } from '@/api/manage/serviceFee'
import {
  PARAMS_SERVICE_FEE,
  FORM_SERVICE_FEE,
  SERVICE_FEE_DATA,
  COLUMNS_SERVICE_FEE_COMPANY,
  COLUMNS_SERVICE_FEE_RELATION,
  OPTION_BLOCK,
  OPTION_INLINE
} from './modules/form'
import ServiceFeeRelationForm from './modules/service_fee_relation_form'
export default {
  name: 'serviceFee',
  components: {
    ServiceFeeRelationForm
  },
  data () {
    return {
       serviceFeeTab:SERVICE_FEE_DATA,
       activeKey:'1',
       params:{
          fApi:{},
          rule:PARAMS_SERVICE_FEE,
          option:OPTION_INLINE
        },
        form:{
          id:'',
          title:'',
          visible:false,
          fApi:{},
          rule:[],
          option:OPTION_BLOCK
        },
        table:{
          columns:COLUMNS_SERVICE_FEE_COMPANY,
          loadData:[],
          pagination:{
            current:1,
            pageSize: 10,
            total:0,
            showSizeChanger: true,
					showQuickJumper: true,
            pageSizeOptions: ["10", "20", "50", "100"],
            showTotal: total => `共有 ${total} 条数据`,
          }
        },
        enterpriseOptions:[]
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  mounted () {
    this.loadEnteriseTable(true);
  },
  methods: {
    async loadEnteriseTable(flag){
      let params = {};
      if(JSON.stringify(this.params.fApi) !== "{}"){
        params.name = this.params.fApi.getValue('enterpriseName');
        this.params.fApi.hidden(true,'parkName');
      }
      if(flag){
        this.table.pagination.current = 1;
        this.table.pagination.pageSize = 10;
      }
      params.pageNum = this.table.pagination.current;
      params.pageSize = this.table.pagination.pageSize;
      const {code,data} = await getSysEnterpriseServiceFeeList(params);
      if(code ==='1'){
        this.table.loadData = data.content;
        this.table.pagination.total = data.total || 0;
      }
    },
    async loadOtherTable(flag){
      let params = {};
      if(JSON.stringify(this.params.fApi) !== "{}"){
        this.params.fApi.hidden(false,'parkName');
         this.params.fApi.hidden(false,'add');
         params.enterpriseName = this.params.fApi.getValue('enterpriseName');
         params.parkName = this.params.fApi.getValue('parkName');
      }
      if(flag){
        this.table.pagination.current = 1;
        this.table.pagination.pageSize = 10;
      }
      params.pageNum = this.table.pagination.current;
      params.pageSize = this.table.pagination.pageSize;
      const {code,data} = await getSysEnterpriseParkServiceFeeList(params);
      if(code ==='1'){
        this.table.loadData = data.content;
        this.table.pagination.total = data.total || 0;
      }
    },
    handleTableChange(pagination){
      this.table.pagination.current = pagination.current;
      this.table.pagination.pageSize = pagination.pageSize;
      if(this.activeKey === '1'){
        this.loadEnteriseTable(false);
      }else if(this.activeKey === '2'){
        this.loadOtherTable(false);
      }
    },
    loadTable(){
      if(this.activeKey === '1'){
        this.loadEnteriseTable(true);
      }else if(this.activeKey === '2'){
        this.loadOtherTable(true);
      }
    },
    callbackTab(tabKsy){
      this.activeKey = tabKsy;
      this.table.columns = tabKsy === '1' ? COLUMNS_SERVICE_FEE_COMPANY : COLUMNS_SERVICE_FEE_RELATION;
      if(tabKsy == '1'){
        this.loadEnteriseTable(true);
      }else if(tabKsy == '2'){
         this.loadOtherTable(true);
      }
    },
    async add(rows){
      this.form.rule = FORM_SERVICE_FEE;
      this.form.visible = true;
      if(rows === true){
        this.form.id = "";
        this.form.title="新增";
        const enterpriseOptions = await store.dispatch('sysAllEnabledEnterpriseFee');
        this.$nextTick(()=>{
          this.form.fApi.updateRules({'customInfo':{title:''}},true)
          this.form.fApi.updateRules({'enterpriseId':{options:enterpriseOptions}})
          this.form.fApi.resetFields();
          this.form.fApi.disabled(false,'enterpriseId');
        })
      }else{
        this.form.id = rows.id;
        this.form.title="编辑";
        const enterpriseOptions = await store.dispatch('sysAllEnabledEnterprise');
        this.$nextTick(()=>{
          this.form.fApi.updateRules({'customInfo':{title:''}},true)
          this.form.fApi.updateRules({'enterpriseId':{options:enterpriseOptions}})
          this.form.fApi.resetFields();
          this.form.fApi.disabled(true,'enterpriseId');
          this.form.fApi.setValue({
            enterpriseId:rows.enterpriseId,
            cmbAmountBiggestLimit:rows.cmbAmountBiggestLimit,
            aliPayAmountBiggestLimit:rows.aliPayAmountBiggestLimit,
            platformRatio:rows.platformRatio,
            ageLimit:rows.ageLimit,
            vatRatio:rows.vatRatio,
            signOrdering:rows.signOrdering,
            personalSignModeNos:rows.personalSignModeNos
          })
        })
      }
    },
    handleOk(){
      let that = this;
      this.form.fApi.submit(async (formData, $f) => {
        try {
          let params = {};
          if(this.form.id){
            //fApi.removeField('name')
            for(var keys in formData){
              if(formData[keys] !== undefined && keys != 'enterpriseId'){
                params[keys] = formData[keys];
              }
            }
            params.id = this.form.id;
          }
          const {code} = this.form.id ? await sysEnterpriseFeeConfigEdit(params) : await sysEnterpriseFeeConfigAdd(formData);
          if(code === '1'){
            this.form.visible = false;
            // this.enterpriseData();//重新获取
            this.loadEnteriseTable(false);
            await store.dispatch('allEnterpriseIdQueryEnterpriseSet',this.userInfo.relationId);
          }
        } catch (error) {
          this.$message.info(JSON.stringify(error));
        }
      })
    },
    radioChange(e){
      if(e.target.value === 1){
         this.form.fApi.updateRules({'customInfo':{title:'必须先做完自由职业者签约功能后才能进行生成账单操作'}},true)
      }else if(e.target.value === 2){
         this.form.fApi.updateRules({'customInfo':{title:'个人不提前做签约也能生成账单'}},true)
      }
    },
    reset(){
       this.params.fApi.resetFields();
       if(this.activeKey === '1'){
        this.loadEnteriseTable(true);
      }else if(this.activeKey === '2'){
        this.loadOtherTable(true);
      }
    },
    onOk(falg){
      if(falg){
        this.activeKey === '1';
      }
      if(this.activeKey === '1'){
        this.loadEnteriseTable(falg);
      }else if(this.activeKey == '2'){
         this.loadOtherTable(falg);
      }
    }
  }
}
</script>


<style>
  .ant-input-number{
    width: 100% !important;
  }
</style>


